<template lang="pug">
div
  table.ui.table.collapsing
    thead
      tr
        th ID
        th.border-right SKU
        th.border-right 颜色
        th 库存
        th 排序值
        th 试戴中
        th.border-right 生产中
        //- th 销量
        //- th 试戴量
        //- th 购物车
        th.border-right 状态
        th URL
    tbody
      tr(v-for="subProduct in product.sub_products ")
        td {{subProduct.id}}
        td.border-right {{subProduct.sku_name}}
        td.border-right {{subProduct.name}}
        td(v-bind:class="{ red: subProduct.statistics.stock_warning }") {{subProduct.statistics.in_stock}}
        td.border-right {{subProduct.order_index}}
        td {{subProduct.statistics.try}}
        td.border-right {{subProduct.statistics.production}}
        //- td {{subProduct.statistics.sold}}
        //- td {{subProduct.statistics.tried}}
        //- td {{subProduct.statistics.in_cart}}
        td.border-right {{subProduct.status | subProductStatus}}
        td {{subProduct.url}}
  //- table.ui.celled.collapsing.table
  //-   thead
  //-     tr
  //-       th ID
  //-       th SKU
  //-       th 颜色
  //-       th 状态
  //-       th URL
  //-   tbody
  //-     tr(v-for="subProduct in product.sub_products | orderBy 'index'")
  //-       td {{subProduct.id}}
  //-       td {{subProduct.sku_name}}
  //-       td {{subProduct.name}}
  //-       td {{subProduct.status | subProductStatus}}
  //-       td {{subProduct.url}}
  .ui.section.divider
  h2.ui.header 基本信息
  .ui.form
    .three.fields
      .field
        input(type='text', v-bind:value="product.name", readonly)
      .field
        input(type='text', v-bind:value="product.properties.type", readonly)
      .field
        input(type='text', v-bind:value="product.sort_index", readonly)
    .three.fields
      .field
        input(type='text', v-bind:value="product.properties.weight", readonly)
      .field
        input(type='text', v-bind:value="product.price", readonly)
      .field
        input(type='text', v-bind:value="product.url", readonly)
    .three.fields
      .field
        input(type='text', v-bind:value="product.properties.shape", readonly)
      .field
        input(type='text', v-bind:value="product.properties.gender", readonly)
      .field
        input(type='text', v-bind:value="product.properties.size", readonly)
    .ui.section.divider
    h2.ui.header 陈列顺序
    .ui.grid
      .five.wide.column(v-for="subProduct in product.sub_products | orderBy 'index'")
        .ui.input.fluid
          input(type='text', v-bind:value="`${this.subProduct.sku_name} ${this.subProduct.name}`", readonly)
        br
        .flex.ac.jsb
          .img-wrap
            img.img(v-bind:src.sync='subProduct.thumbnail.large')
          .img-wrap
            img.img(v-bind:src.sync='subProduct.thumbnail.dot')
  .ui.section.divider
  .ui.grid
    .ten.wide.column
      h2.ui.header 产品描述
    .six.wide.column.right.aligned
      obj-single-select(
        :options="product.sub_products",
        key="sku_name",
        label="sku_name",
        :selected.sync="selected",
        type="selected",
        :custom-label="helper.subProductCustomLabel",
      )
  table.ui.very.basic.table(v-for="subProduct in product.sub_products")
    tbody(v-if="subProduct.sku_name === selected.sku_name")
      tr
        //- td 序号
        td 图片
        td 文字描述
      //- tr.handle(v-dragable-for="description in subProduct.description", options='{"ghostClass": "ghost", "handle": ".handle"}')
      tr(v-for="description in subProduct.description")
        //- td
        //-   .ui.input
        //-     input(type='text', v-bind:value="$index", readonly)
        td
          .img-wrap
            img.img(v-bind:src.sync='description.photo')
        td
          .ui.form
            .field
              textarea(v-bind:value="description.text", readonly)
          //- .ui.input
          //-   input(type='text', v-bind:value="description.text", readonly)
  //- .ui.section.divider
  //- h2.ui.header 猜你喜欢
  //- .ui.grid
  //-   .five.wide.column
  //-     .ui.grid
  //-       .four.wide.column
  //-         .ui.input.fluid
  //-           input(type='text', value="01", readonly)
  //-       .twelve.wide.column
  //-         .ui.input.fluid
  //-           input(type='text', value="01", readonly)
</template>

<script>
import ObjSingleSelect from '../../modules/select/objSingle'

export default {
  name: 'productView',
  components: {
    ObjSingleSelect,
  },
  props: ['product', 'selected'],
  data() {
    return {
      // selected: null,
    }
  },
  computed: {
  },
  methods: {
  },
  ready() {
    $(this.$el).find('.dropdown').dropdown({
      on: 'hover'
    })
  },
  // watch: {
  //   'product.sub_products': {
  //     handler (val, old) {
  //       this.selected = this.product.sub_products[0]
  //     },
  //     deep: true,
  //     immediate: true,
  //   },
  // },
}
</script>

<style lang="sass" scoped>
</style>
